<template>
  <el-dialog
    :title="this.ruleForm.id!==null?'修改目录' :'新增目录'"
    :visible="dialogVisible"
    width="30%"
    @open="open"
    :beforeClose="handleClose"
  >
    <!-- 新增目录 add-directory/新增目录英文 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      @submit.native.prevent
    >
      <el-form-item label="所属学科" prop="subjectID">
        <el-select
          v-model="ruleForm.subjectID"
          placeholder="请选择"
          style="width: 315px"
        >
          <el-option
            :v-if="resForm === null"
            v-for="item in menu"
            :key="item.id"
            :label="item.subjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="tagName">
        <el-input
          v-model="ruleForm.tagName"
          placeholder="请输入目录名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addDirectory">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// 引入新增接口
import { add, update } from '@/api/hmmm/tags.js'
// 引入获取学科接口
import { list } from '@/api/hmmm/subjects.js'
export default {
  props: {
    // 父传子控制弹层显示和隐藏
    dialogVisible: {
      type: Boolean,
      default: false
    },
    resForm: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      // 下拉菜单数据
      menu: '',
      // dialogVisible: false
      ruleForm: {
        // 判断新增或编辑
        id: null,
        // 所属学科
        subjectID: '',
        // 目录名称
        tagName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ],
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹层
    handleClose () {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.ruleForm = {
            // 判断新增或编辑
            id: null,
            // 所属学科
            subjectID: '',
            // 目录名称
            tagName: ''
          }
          this.$emit('close', false)
        })
        .catch((_) => {})
    },
    // 确定提交表单
    addDirectory () {
      // 兜底校验
      this.$refs.ruleForm.validate(async (valid) => {
        // 校验通过
        if (valid) {
          // 如果id有值，是编辑斗则是新增
          if (this.resForm.id) {
            await update(this.ruleForm)
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          } else {
            await add(this.ruleForm)
            this.$message({
              message: '提交成功',
              type: 'success'
            })
          }
          this.ruleForm = {
            // 判断新增或编辑
            id: null,
            // 所属学科
            subjectID: '',
            // 目录名称
            tagName: ''
          }
          this.$emit('close', false)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取学科列表
    async getDiscipline () {
      const res = await list()
      console.log('学科列表', res.data.items)
      this.menu = res.data.items
    },
    // 打开时回显数据
    open () {
      if (this.resForm.id) {
        this.ruleForm.subjectID = this.resForm.subjectID
        this.ruleForm.tagName = this.resForm.tagName
        this.ruleForm.id = this.resForm.id
      }
    }
  },
  created () {
    this.getDiscipline()
  }
}
</script>

<style scoped lang='less'></style>
